<template>
    <el-dialog v-model="dialog" title="Tips" width="500">
        <div class="text-box">
            <!-- 您的token即将过期，是否续期？ -->
            {{ props.rtMsg }} {{ countDown }} 秒后返回
        </div>
        <div class="cbtn-box">
            <el-button type="primary" size="small" @click="renewToken(1)">续期</el-button>
            <el-button type="primary" size="small" @click="renewToken(0)">返回</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

let countDown = ref(11) //倒计时初始值
let isCountDown = ref(false) //是否开启倒计时
let dialog = ref(false)
let timer = null // 存储定时器ID
//打开
const open = () => {
    dialog.value = true
    isCountDown.value = true
    countDownFn()
}
//关闭
const close = () => {
    dialog.value = false
    stopCountDown()
}

//接受父组件传过来的表格列的key值数组
let props = defineProps({
    rtMsg: {
        type: String,
        default: ''
    }
})

let emit = defineEmits(['isRenewToken'])


/**
 * 发送续期请求
 * @param isRenew 1：续期 0：返回
 */
const renewToken = (isRenew) => {
    // console.log(isRenew)
    dialog.value = false
    stopCountDown()
    countDown.value = 11
    emit('isRenewToken', isRenew)
}

//向外提供方法或数据
defineExpose({
    open,
    close,
})

// 停止倒计时
const stopCountDown = () => {
    if (timer) {
        clearTimeout(timer)
        timer = null
    }
    isCountDown.value = false
}

//倒计时
const countDownFn = () => {
    if (countDown.value > 0) {
        countDown.value--
        timer = setTimeout(() => {
            countDownFn()
        }, 1000)
    }
    if(countDown.value === 0) {
        stopCountDown()
        renewToken(0)
    }
    // console.log(countDown.value)
}



</script>

<style lang="less" scoped>
.el-dialog {
    height: 37.5rem;
    width: 50rem;
    overflow: auto;

    .text-box {
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>